<template>
	<transition>
		<div class="pro_info_main">
			<div class="info_top">
				<span>产品参数：</span>
				<div class="ps">
					<p>证书编号：2017011606935712</p>
					<p>屏幕尺寸: 7.84英寸</p>
					<p>3C规格型号：N1、N1S、N1Plus、N1L...</p>
					<p>操作系统: 安卓系统</p>
					<p>功能: GPS定位 GPS导航 WIFI 上网 倒车影...</p>
					<p>地图类型: 高德</p>
				</div>
				<div class="car_info">
					<img src="~imgs/pro_details_4.gif"/>
					<p>想象在一条宽阔的马路上</p>
					<p>使用着全方位系统</p>
					<p>安全、便利的导航</p>
					<span></span>
				</div>
			</div>
			<div class="info_details">
				<div class="details_1">
					<span>1.场景应用</span>
					<p>
						<img src="~imgs/pro_details_5.gif"/>
						<img src="~imgs/pro_details_6.gif"/>
					</p>
				</div>
				<div class="details_2">
					<span>2.细节展示</span>
					<p>
						<img src="~imgs/pro_details_7.gif"/>
						<i>正面</i>
						<img src="~imgs/pro_details_8.gif"/>
						<i>反面</i>
					</p>
				</div>
				<div class="details_3">
					<span>3.车内效果</span>
					<img src="~imgs/pro_details_12.gif"/>
					<img src="~imgs/pro_details_13.gif"/>
					<div class="txt">
						<p>
							<em>安全提示：</em>
							请勿随意接收任何来源不明的文件，请勿随意点击任何来
							源不明的链接。涉及资金往来的事项请务必仔细核对资金往来信息。 
							思坦博不会以订单有问题，让您提供任何银行卡、密码、手机验证码！
							遇到可疑情况可在钱盾“诈骗举报”中进行举报
						</p>
						<p>
							<em>卖家声明</em>
							思坦博为第三方交易平台及互联网信息服务提供者，思坦
							博（含网站、客户端等）所展示的商品/服务的标题、价格、详情等
							信息内容系由店铺经营者发布，其真实性、准确性和合法性均由店铺
							经营者负责。思坦博提醒用户购买商品/服务前注意谨慎核实。如用
							户对商品/服务的标题、价格、详情等任何信息有任何疑问的，请在
							购买前通过思坦博与店铺经营者沟通确认；思坦博存在海量店铺，如
							用户发现店铺内有任何违法/侵权信息，请立即向思坦博举报并提供
							有效线索。
						</p>
					</div>
				</div>
			</div>
			<div class="info_bottom">
				<div class="bottom_l">
					<img src="~imgs/pro_details_9.gif" @click="goHome"/>
					<img src="~imgs/pro_details_10.gif"/>
					<img src="~imgs/pro_details_11.gif"/>
				</div>
				<div class="bottom_r">
					<button>加入购物车</button>
					<button @click="goConfirm">立即购买</button>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	export default{
		methods:{
			goHome(){
				this.$router.push("/Home");
			},
			goConfirm(){
				this.$router.push("/Confirm");
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.v-enter
		transform: translate3d(100%,0,0)
	.v-enter-active,.v-leave-active
		transition: all .3s;
	.v-leave-to
		transform: translate3d(-100%,0,0)
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	.pro_info_main
		.info_top
			width: 7.02rem;
			margin: 0 auto;
			span
				font-size: 0.28rem;
				font-weight: 800;
				color: #515151 !important;
			.ps
				width: 100%;
				p
					font-size: 0.2rem;
					color: #515151;
					float: left;
					margin-bottom: 0;
				p:nth-of-type(even)
					float: right;
			.car_info
				width: 100%;
				text-align: center;
				img
					width: 100%;
					margin-bottom: 0.3rem;
				p	
					font-size: 0.3rem;
					color: #515151;
					margin-bottom: 0.08rem;
				span
					display: block;
					width: 1.2rem;
					height: 0.06em;
					margin: 0 auto;
					background: #5fa5e9;
		.info_details
			text-align: center;
			width: 7.02rem;
			margin: 0 auto;
			span
				display: block;
				font-size: 0.3rem;
				color: #515151;
				margin: 0.3rem;
			.details_1
				p
					display: flex;
					width: 100%;
					justify-content: space-between;
					img
						width: 3.4rem;
						height: 2.3rem;
			.details_2
				width: 100%;
				p
					width: 100%;
					text-align: center;
					img
						width: 100%;
			.details_3
				img
					width: 100%;
					display: block;
					margin-bottom: 0.1rem;
				.txt
					width: 100%;
					padding: 0.2rem 0;
					background: #e8e8e8;
					p
						font-size: 0.2rem;
						color: #515151;
						padding: 0 0.2rem;
						text-align: left;
						em	
							display: block;
							text-align: left;
		.info_bottom
			width: 100%;
			height: 0.98rem;
			display: flex;
			align-items: center;
			column-count: 2;
			img
				width: 0.5rem;
				height: 0.4rem;
				display: block;
				float: left;
			.bottom_l
				flex: 1;
				display: flex;
				justify-content: space-around;
			.bottom_r
				flex: 1;
				display: flex;
				button
					flex: 1;
					text-align: center;
					font-size: 0.32rem;
					color: #fff;
					background: #a6c7e6;
					border: none;
					border-radius: 0;
				button:last-child
					background: #66acee;
</style>